<template>
	<view class="container clinic-container">
		<view class="top">
			<view class="search-box">
				<!-- <view class="icon-box">
					<view class="iconfont icon">&#xe634;</view>
					<text @click="getLocation">武侯区</text>
				</view> -->
					<view class="search-input">
						<uni-search-bar
						radius="24" 
						placeholder="搜索医生、疾病、医院"
						bgColor="#FFFFFF"
						@cancel="search"
						clear-button="none"
						cancel-text="搜索"
						>
						</uni-search-bar>
					</view>
			</view>
		</view>
		<view class="navigator-contaier">
			<view class="naviBar" :class="{ naviBarSelected: activeIndex === i }" v-for="(item,i) in tabBar" :key="i" @click="switchBar(i)">
			{{item}}
				<view
					:class="['iconfont', activeIndex === i ? (selectParams.distanceSort === 'ASC' || selectParams.scaleSort === 'DESC') ? 'arrow-down': activeIndex === 0 ? 'arrow-down':'arrow-up-actived' : 'arrow-up']"
				>&#xe7e1;</view>
			</view>
		</view>
		
		<view class="menu-box" v-if="activeIndex===0">
			<text class="menu-text" :class="{ naviBarSelected: menuIndex === i }" v-for="(e,i) in menu" :key="i" @click="menuChange(i)">{{e}}</text>
		</view>
		<scroll-view :scroll-y="true" class="list-container" @scrolltolower="onReachButton">
			<view v-if="selectParams.distanceSort" class="center-text">{{selectParams.distanceSort === 'ASC' ? '距离由近到远':'距离由远到近'}}</view>
			<view v-if="selectParams.scaleSort" class="center-text">{{selectParams.distanceSort === 'ASC' ? '规模由小到大':'规模由大到小'}}</view>
			<list-card-vue v-for="(item,i) in listData" :key="i" 
			:image="item.hospitalPicture"
			:name="item.name"
			:job="`医馆规模:${item.hospitalScale}人`"
			:tag="item.institutionalType"
			:category="item.distanceText"
			:belone="item.hospitalFeature"
			:text="item.hospitalSite"
			btn-text="到店预约"
			@buttonClick="click(item)"
			@itemClick="click(item)"
			@imageError="imageErr(item)"
			></list-card-vue>
			<view v-if="listData.length == 0" class="center-text">暂无数据</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import {jump} from "@/untils/tools";
	import listCardVue from "@/components/list-card.vue";
	import { ref,reactive, onMounted, computed, } from "vue"
	import { onLoad } from "@dcloudio/uni-app"
	import api from "../../../common/api";
	import {handleImageError, showToast} from "@/common/util"
	
	const tabBar = ['全部类型',"距离排序","规模排序"]
	const menu = ["中医馆","社区医院","口腔门诊","养老中心","体检中心"]
	let activeIndex = ref(0)
	let menuIndex = ref(0)
	let listData = reactive<any>([])
	interface SelectParams{
		type:string,
		keyword:string,
		distanceSort:string,
		scaleSort:string
		longitude:number,
		latitude:number,
		pageNum:number,
		pageSize:number
	}
	
	let selectParams = ref<SelectParams>({
		type:'',
		keyword:'',
		distanceSort:'',
		scaleSort:'',
		longitude:0,
		latitude:0,
		pageNum:1,
		pageSize:10,
	})
	//-------------- 系统钩子 start ----------
	onLoad((option:any)=>{
		if(option.menuIndex !== undefined) {
			menuIndex.value = parseInt(option.menuIndex)
			selectParams.value.type = menu[menuIndex.value]
		}
		getLocation()
	})
	//-------------- 系统钩子 end ------------
	
	//-------------- 一些逻辑 start ------------
	const switchBar = (i:number)=>{
		activeIndex.value = i
		data.value = []
		selectParams.value.keyword = ''
		if(i === 0){
			menuIndex.value = -1
			selectParams.value.type = ''
			selectParams.value.distanceSort = ''
			selectParams.value.scaleSort = ''
			selectParams.value.pageNum = 1
			getCilnic()
		}else if(i === 1){
			selectParams.value.distanceSort = selectParams.value.distanceSort === 'ASC' ? 'DESC':'ASC'
			selectParams.value.scaleSort = ''
			selectParams.value.type = ''
			selectParams.value.pageNum = 1
			getCilnic()
		}else {
			selectParams.value.scaleSort = selectParams.value.scaleSort === 'DESC' ? 'ASC':'DESC'
			selectParams.value.distanceSort = ''
			selectParams.value.type = ''
			selectParams.value.pageNum = 1
			getCilnic()
		}
	}
	const search = (e:any)=>{
		selectParams.value.keyword = e.value
		data.value = []
		getCilnic()
	}
	const menuChange = (i:number)=>{
		menuIndex.value = i
		console.log('点击了：',menu[i]);
		selectParams.value.type = menu[i]
		data.value = []
		getCilnic()
	}
	const click = (item:any)=>{
		console.log(item);
		jump("/pages/index/clinic/clinicDetail?id="+item.id+"&name="+item.name)
	}
	const yoyakuClick = (item:any)=>{
		console.log('到店预约');
		jump('/pages/index/clinic/toAsking')
	}
	const imageErr = (item:any)=>{
		handleImageError(item,'hospitalPicture')
	}
	const onReachButton = ()=>{
		console.log('到底了');
		getCilnic()
	}
	const getLocation = ()=>{
		showToast('获取位置中',{icon:'loading'})
		uni.getLocation({
			geocode:true,
			altitude:true,
			accuracy:'best',
			isHighAccuracy:true,
			success: (res) => {
				if(res){
					selectParams.value.longitude = res.longitude
					selectParams.value.latitude = res.latitude
					getCilnic()
				}
			},
			fail: (err) => {
				if(err.errMsg == 'getLocation:fail auth deny'){
					showToast('您已经关闭权限，请手动开启')
				}
			}
		})
	}
	//-------------- 一些逻辑 end --------------
	
	
	//-------------- 请求接口 start ------------
	let data = ref([])
	const getCilnic = async ()=>{
		uni.showLoading()
		const res = await api.getClinicInfoByType(selectParams.value)
		if(data.value.length >= res?.data?.total){
			showToast('没有更多数据',{icon:'none',mask:false,duration:1000})
			return
		}
		if(res)uni.hideLoading()
		data.value = data.value.concat(res?.data?.rows || [])
		data.value.map((item:any)=>{
			return {
				...item,
				hospitalPicture:item.hospitalPicture[0]
			}
		})
		listData.splice(0,listData.length,...data.value)
	}
	//-------------- 请求接口 end --------------

</script>

<style lang="scss">
	.clinic-container{
		.top{
			padding: 0 20rpx;
			background: linear-gradient( 180deg, #DBFFFB 0%, #D9EFFD 56%, #D7E5FF 66%, #F5F6FA 100%);
		}
		.search-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.search-input{
				flex: 1;
				.uni-searchbar{
					.uni-searchbar__cancel{
						z-index: 10;
						padding: 0;
						position: absolute;
						right: 10rpx;
						color: #FFFFFF;
						background-color: #3AD3C1;
						border-radius: 50rpx;
						width: 120rpx;
						text-align: center;
					}
				}
			}
			.icon-box{
				display: flex;
				align-items: center;
				padding: 20rpx;
				.icon{
					display: inline-block;
				}
			}
			
		}
		.navigator-contaier{
			background-color: #F5F5F5;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 20rpx;
			.naviBar{
				transition: all 0.3s ease;
				padding: 10rpx 20rpx;
				border-radius: 24rpx;
				text-align: center;
				border: 2rpx solid #FFFFFF;
				background-color: #FFFFFF;
				font-size: 24rpx;
			}
			.arrow-up{
				transition: all 0.3s ease;
				display: inline-block;
				color: rgba(191, 191, 191, 1);
				transform: rotateZ(180deg);
				font-size: 24rpx;
			}
			.arrow-down{
				transition: all 0.3s ease;
				display: inline-block;
				color: #299F91;
				transform: rotateZ(0deg);
				font-size: 24rpx;
			}
			.arrow-up-actived{
				transition: all 0.3s ease;
				display: inline-block;
				color: #299F91;
				transform: rotateZ(180deg);
			}
			.naviBarSelected {
				border: 2rpx solid #3AD3C1;
				background-color: rgba(58, 211, 193, 0.10);
				color: #299F91;
			}
		}
		.menu-box {
		  border-radius: 16rpx;
		  padding: 20rpx;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  background-color: #FFFFFF;
		  .naviBarSelected {
			box-shadow: 0 0 2rpx 2rpx #3AD3C1;
		  	background-color: rgba(58, 211, 193, 0.10);
		  	color: #299F91;
		  }
		  .menu-text {
		    text-align: center;
		    background-color: #ffffff;
			padding: 0 8rpx;
		    border-radius: 8rpx;
			font-size: 26rpx;
		  }
		}
		.list-container{
			box-sizing: border-box;
			height: 1200rpx;
			padding: 20rpx;
			background-color: #F5F5F5;
			.center-text{
				color: #a6a7a8;
				font-size: 27rpx;
				text-align: center;
				margin-bottom: 14px;
				position: relative;
				&:before{
					content: '——';
					position: absolute;
					left: 164rpx;
					color: #a6a7a8;
					z-index: 1;
				}
				&:after{
					content: '——';
					position: absolute;
					right: 164rpx;
					color: #a6a7a8;
					z-index: 1;
				}
			}
		}
	}
</style>
